<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模板template分离</title>
  <script src="/js/vue.js"></script>
	<style>

	</style>
</head>
<body>
  <div id="app">
		<!-- 3. 使用组件 -->
    <my-cpn></my-cpn>
  </div>
<br>
		<!-- 1. 创建模板 -->
    <!-- 模板分离分两种 -->
    <!-- 第一种：script标签 type是text/x-template 第一层必须放一个容器div-->
	<!-- <script type="text/x-template" id="cpn">
		<div>
			<h2>这是组件的标题11</h2>
			<p>这是组件的内容</p>
			<button>这是组件的按钮</button>
		</div>
	</script> -->
	<!-- 第二种：template标签 第一层必须放一个容器div -->
	 <template id="cpn">
		<div>
			<h2>这是组件的标题11</h2>
			<p>这是组件的内容</p>
			<button>这是组件的按钮</button>
			<son-cpn></son-cpn>
		</div>
	</template>

	<template id="cpn2">
		<div>
			<h2>这是子组件的标题</h2>
			<p>这是子组件的内容</p>
			<button>这是子组件的按钮</button>
		</div>
	</template>	

  <script>
		// // 2. 注册组件（全局注册） 
		// Vue.component('my-cpn',{
		// 	template:'#cpn'
		// }/* 组件对象*/)


    let app = new Vue({//根组件
      el:"#app",
      data:{ 
        msg:'hello world'
      },
			components:{
				'my-cpn':{//父组件
					template:'#cpn',
					components:{
						'son-cpn':{
							template:'#cpn2'
						}
					}
				}
			}
    })
  </script>
</body>
</html>


